import React, { Component } from 'react'
import { PageHeader,Form,Input,Radio,Select,InputNumber,Button,Space,Popconfirm,Table, message } from 'antd';
import axios from "axios"

import "./Add.css"

export default class Add extends Component {
    // 设置一个状态
    state ={
        managerList:[],
        SubjoinList:[],
        "id":'',
        "customer":"",
        "paytype": '',
        "remarks":'',
        "business":'',
        "pname":'',
        "punitName":'',
        "pnum":1,
        "punitPrice":'',
        "ptotalPrice":'',
        orderList:[{
            "id":"",
            "customer":"",
            "paytype": '',
            "remarks":'',
            "business":'',
            "pname":'',
            "punitName":'',
            "pnum":"",
            "punitPrice":'',
            "ptotalPrice":'',
        }],
    }
    // 输入框内值改变时的函数
    getVal=(e)=>{
        console.log(e.target.value)
            this.setState({
                [e.target.name]:e.target.value
            })
    }
    // 订单添加模块功能
    // 点击改变数量的函数
    changenumber =(value)=>{
        const {punitPrice} = this.state
        this.setState({
            "pnum":value,
            "ptotalPrice":punitPrice*value
        })
    }
    // 声明周期
    componentDidMount(){
        this.getManagerList()
        this.getSubjoin()
      }
    // 查询出支付方式
    getManagerList=()=>{
        // 商品查询列表
    axios.get("/api/payment/paytype/list",{}).then(res=>{
        if(res.data.code===200){
          this.setState({
            managerList:res.data.page.list,
          })
        }
      },   //成功的回调
      error =>{
        console.log(error)
      }) //失败的回调
    }
    // payment_order_subjoin商品列表查询
    getSubjoin =()=>{
        axios.get("/api/payment/product/list").then(res=>{
            if (res.data.code === 200) {
                this.setState({
                    SubjoinList:res.data.page.list
                })
            }
            console.log("$",res.data.page.list)
        },
        error =>{
            console.log(error)
        })
    
    }
    // 点击返回按钮的回调函数
    closeAdd =(e)=>{
        this.props.history.push("/home/orders")
        e.target.value =""
    }
    // 点击提交订单按钮函数
    obtainValue =()=>{
        this.setState({
            orderList:[{
                "id":this.state.id,
                "customer":this.state.customer,
                "paytype": this.state.paytype,
                "remarks":this.state.remarks,
                "business":this.state.business,
                "pname":this.state.pname,
                "punitName":this.state.punitName,
                "pnum":this.state.pnum,
                "punitPrice":this.state.punitPrice,
                "ptotalPrice":this.state.ptotalPrice,
            }]
        })
    }
    // onGenderChange选择商品
    onGenderChange =(value,object)=>{
        this.setState({
            "business":value,
            "punitName":this.state.SubjoinList[object.key].unit,
            "punitPrice":this.state.SubjoinList[object.key].unitPrice,
            "ptotalPrice":this.state.SubjoinList[object.key].unitPrice,
            "id":this.state.SubjoinList[object.key].id
        })
        // console.log(object.key)
        // console.log(this.state.SubjoinList[object.key])
            console.log("!",this.state.SubjoinList[object.key].unit)
    }
    // 删除订单方法
    // 删除方法
  confirm=(record)=>{
    /* return ()=>{
      const {currPage} = this.state
      const ids = [record.id]
      console.log(record.id);
      axios.post("/api/payment/order/delete",
        ids
      ).then(response => {
        message.success('删除成功！');
        this.getManagerList(currPage)
      },   //成功的回调
      error =>{
        message.error('删除失败！');
      }) //失败的回调
    
    } */
  }
//   添加订单
    addOrders = ()=>{
        message.success("恭喜你添加成功！")
        /* axios.post("/api/payment/admin/save",{
            "memberName": this.state.memberName,
            "memberPass": this.state.memberPass,x
            "role": this.state.role
        }).then(res=>{
            console.log(res)
            if(res.data.code===200){
                message.success(res.data.msg,1,()=>{
                    this.closeAdd()
                })
            }else{
                message.error(res.data.msg)
            }
        }) */

    }
    render() {
        // 左边表单的创建的一些参数
    // 创建了一个支付方式数组
    const {managerList,SubjoinList,orderList} = this.state
    const options = [
        /* { label: '支付宝', value: '1' },
        { label: '微信', value: '2' },
        { label: '银行卡', value: '3' },
        { label: '银联', value: '4' },
        { label: '贷款', value: '5' },
        { label: '小荷包', value: '6' },
        { label: '余额宝', value: '7' }, */
        managerList.map(item=>{
            return { label: item.payName, value: item.id }
        })
    ];
    const { Option } = Select;
    //列表
        const columns = [
            { title: '客户名称', dataIndex: 'customer'},
            { title: '单位名称', dataIndex: 'punitName'},
            { title: '数量', dataIndex: 'pnum'},
            { title: '单价', dataIndex: 'punitPrice'},
            { title: '总价', dataIndex: 'ptotalPrice'},
            {
              title: '操作',
              render: (text, record) => (
                //fragment
              <Space>
              <Popconfirm
                  title="你确认要删除这一条信息嘛？"
                  onConfirm={this.confirm(record)}
                  onCancel={this.cancel}
                  okText="确认"
                  cancelText="取消"
                  type='primary' size='small'
              >
                  <Button style={{color:"red"}}>删除</Button>
              </Popconfirm>
              </Space>
              ),
            },
          ];
        //   订单添加排版核心代码
        return (
            <div>
                <PageHeader className="site-page-header" onBack={this.closeAdd} title="返回订单" subTitle="添加订单" />
                <div className="aboutTable">
                    <div className="TableLift">
                        <Form>
                            <Form.Item name="customer" label="客户名称" rules={[ { required: true, message:"客户名称不能为空"}]}>
                                <Input  onChange={this.getVal} name="customer"/>
                            </Form.Item>
                            <Form.Item name="paytype" label="支付方式" rules={[ { required: true, message:"支付方式不能为空"}]}>
                            <Radio.Group name="paytype" options={options[0]} onChange={this.getVal} value={this.state.paytype} optionType="button" />
                            </Form.Item>
                            <Form.Item name={['user', 'introduction']} label="备注">
                                <Input.TextArea name="remarks" />
                            </Form.Item>
                            <Form.Item name="business" label="商家名称" rules={[ { required: true, message:"商家名称不能为空"}]}>
                            <Input  onChange={this.getVal} name="pname"/>
                            </Form.Item>
                            <hr/>
                            <Form.Item name="pname" label="商品名称" rules={[ { required: true, message:"商品名称不能为空"}]}>
                                <Select placeholder="请选择商品" onChange={this.onGenderChange}  name="business">
                                    {SubjoinList.map((item,index)=>{
                                         return <Option key={index} value={item.id}>{item.productName}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                            <Form.Item name="punitName" label="单位名称">
                                <Input placeholder={this.state.punitName} name="punitName" disabled={true}/>
                            </Form.Item>
                            <Form.Item name="pnum" label="数量">
                                <InputNumber min={1} max={10} defaultValue={1} onChange={this.changenumber} />
                            </Form.Item>
                            <Form.Item name="punitPrice" label="单价">
                                <InputNumber placeholder={this.state.punitPrice} name="punitPrice" disabled={true}/>
                            </Form.Item>
                            <Form.Item name="ptotalPrice" label="总价">
                                <InputNumber placeholder={this.state.ptotalPrice} disabled={true} />
                            </Form.Item>
                            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                                <Button type="primary" htmlType="submit" onClick={this.obtainValue}>
                                加入订单
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="TableRight">
                    <Table className="components-table-demo-nested" rowKey="id" dataSource={orderList} columns={columns} pagination={false}/> {/* rowKey="id" dataSource={orderList}*/}
                    <Form>
                    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                        <Button type="primary" htmlType="submit" onClick={this.addOrders}>
                        加入订单
                        </Button>
                    </Form.Item>
                    </Form>
                    </div>
                </div>
            </div>
        )
    }
}


